<template>
  <div class="box">
    <z-panel :config="{ title: '基本信息', index: 1 }">
      <!-- 活动名称 -->
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item>
          <span
            slot="label"
            style="font-size: 21px; color: #2e4562; margin-right: 10px"
          >
            活动名称
          </span>
          <el-input placeholder="请输入活动标题" v-model="form.name"></el-input>
        </el-form-item>
        <!-- 活动简介 -->
        <el-form-item>
          <span
            slot="label"
            style="font-size: 21px; color: #2e4562; margin-right: 10px"
          >
            活动简介
          </span>
          <el-input
            placeholder="请输入活动简介"
            v-model="form.introduction"
          ></el-input>
        </el-form-item>
        <!-- 请选择时区 -->
        <el-form-item>
          <span
            slot="label"
            style="font-size: 21px; color: #2e4562; margin-right: 10px"
          >
            请选择时区
          </span>
          <el-select v-model="form.time" placeholder="请选择时区">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <!-- 活动时间 -->
        <el-form-item>
          <span
            slot="label"
            style="font-size: 21px; color: #2e4562; margin-right: 10px"
          >
            活动时间
          </span>
          <el-col :span="11" style="margin-right: 40px">
            <el-date-picker
              type="date"
              placeholder="请选择开始时间"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="请选择结束时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <div style="display: flex; justify-content: flex-start">
          <!-- 活动城市 -->
          <el-form-item>
            <span
              slot="label"
              style="font-size: 21px; color: #2e4562; margin-right: 10px"
            >
              活动城市
            </span>

            <el-select v-model="form.city" placeholder="活动城市">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <!-- 活动主题 -->
          <el-form-item>
            <span
              slot="label"
              style="font-size: 21px; color: #2e4562; margin-right: 10px"
              >活动主题</span
            >

            <el-select v-model="form.theme" placeholder="活动主题">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <!-- 私人活动 -->
          <el-checkbox-group style="margin: 8px 0 0 20px" v-model="form.type">
            <el-checkbox label="私人活动" name="type"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div style="display: flex; justify-content: flex-start">
          <!-- 详细地址 -->
          <el-form-item style="width: 85%">
            <span
              slot="label"
              style="font-size: 21px; color: #2e4562; margin-right: 10px"
            >
              详细地址
            </span>

            <el-input placeholder="详细地址" v-model="form.address"></el-input>
          </el-form-item>
          <!-- 线上活动 -->
          <el-checkbox-group v-model="form.type">
            <el-checkbox
              style="margin: 8px 0 0 20px"
              label="线上活动"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 亮点活动 -->
        <el-form-item>
          <span
            slot="label"
            style="font-size: 21px; color: #2e4562; margin-right: 10px"
          >
            亮点活动
          </span>

          <el-input placeholder="亮点活动" v-model="form.highlights"></el-input>
        </el-form-item>
        <div style="display: flex; justify-content: flex-start">
          <!-- 活动组织 -->
          <el-form-item>
            <span
              slot="label"
              style="font-size: 21px; color: #2e4562; margin-right: 10px"
            >
              活动组织
            </span>

            <el-input
              placeholder="请输入活动组织者"
              v-model="form.organization"
            ></el-input>
          </el-form-item>
          <!-- 人数限制 -->
          <el-form-item>
            <span
              slot="label"
              style="font-size: 21px; color: #2e4562; margin-right: 10px"
            >
              人数限制
            </span>

            <el-input placeholder="请输入人数" v-model="form.limit"></el-input>
          </el-form-item>
        </div>
        <div>
          <!-- 活动标签 -->
          <el-form-item>
            <span
              slot="label"
              style="font-size: 21px; color: #2e4562; margin-right: 10px"
            >
              活动标签
            </span>
            <el-select
              style="margin-bottom: 28px"
              v-model="form.label"
              placeholder="请选择活动标签"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <div style="width: 730px; height: 155px; border: solid 1px #d8d8d8">
              <div style="padding: 14px 14px 0 14px">
                <div class="item">
                  <span>展览</span>
                </div>
              </div>
            </div>
          </el-form-item>
        </div>
        <div style="display: flex">
          <!-- 上传海报 -->
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div style="margin: 75px 0 0px 42px">
            <el-button
              style="
                width: 300px;
                height: 48px;
                margin-bottom: 41px;
                color: #414042;
                border-radius: 25px;
                font-size: 18px;
                font-weight: 700;
                background-color: #d8d8d8;
                border: 0;
              "
            >
              上传海报
            </el-button>
            <div>
              <p
                style="
                  margin-bottom: 13px;
                  font-size: 18px;
                  font-weight: 700;
                  color: #414042;
                "
              >
                温馨提示：
              </p>
              <p style="font-size: 14px; color: #414042">
                1.海报最佳尺寸1280*720，.jpg或.png格式，不超过2M
              </p>
              <p style="font-size: 14px; color: #414042">
                2.精美海报有助于活动展示，提升报名量
              </p>
            </div>
          </div>
        </div>
      </el-form>
    </z-panel>
    <z-panel :config="{ title: '报名人填写信息', index: 2 }">
      <el-form ref="form" :model="form" label-width="85px">
        <!-- 标题 -->
        <div>
          <p style="font-size: 24px; color: #414042; margin-bottom: 10px">
            报名填写
          </p>
          <el-checkbox-group v-model="form.type">
            <el-checkbox
              style="padding-bottom: 40px"
              label="报名用户的姓名 ， 手机号码 ， 邮箱为必填
            ,新用户活动报名需要通过验证码校验手机"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 标签 -->
        <div>
          <div>
            <div class="item">
              <span>姓名</span>
            </div>
          </div>
          <el-button
            class="diy_agreement_margin"
            style=""
            type="primary"
            round
            @click="openAddForm = true"
          >
            添加自定义表单
          </el-button>
          <div class="addinput_itself">添加自定义表单</div>
        </div>
        <!-- 添加自定义用户协议 -->
        <div>
          <el-button
            class="diy_agreement_margin"
            style=""
            type="primary"
            round
            @click="showDialog = true"
          >
            添加自定义用户协议
          </el-button>
          <div class="addinput_itself">添加自定义用户协议</div>
        </div>
        <!-- 添加自定义上传 -->
        <div>
          <el-button
            round
            type="primary"
            class="diy_agreement_margin"
            @click="openUpload = true"
          >
            添加自定义上传
          </el-button>
          <div class="addinput_itself">添加自定义上传</div>
        </div>
      </el-form>
    </z-panel>
    <z-panel :config="{ title: '活动详情', index: 3 }">
      <quill-editor
        ref="myQuillEditor"
        v-model="content"
        :options="editorOptionJieDa"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
      />
    </z-panel>
    <z-panel :config="{ title: '场次信息', index: 4 }">
      <el-button @click="addList" round>+新增</el-button>
      <el-table :data="information" style="width: 100%">
        <template slot="empty">
          <el-button
            style="
              width: 61px;
              height: 61px;
              border-radius: 50px;
              background-color: #ed8e1e;
              border: 0;
            "
            @click="addList"
          >
          </el-button>
        </template>
        <el-table-column fixed prop="name" label="场次名称" width="250">
          <input type="text" class="course_name" />
        </el-table-column>
        <el-table-column prop="time" label="场次举办时间" width="420">
          <el-date-picker
            style="border-radius: 0; background-color: #fff"
            prefix-icon="0"
            v-model="value1"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="190">
          <template>
            <el-button
              style="
                width: 74px;
                height: 51px;
                background-color: #d8d8d8;
                border: 0;
                color: #000;
                border-radius: 30px;
                font-size: 14px;
              "
              size="small"
            >
              保存
            </el-button>
            <el-button
              style="
                width: 74px;
                height: 51px;
                background-color: #979797;
                border: 0;
                color: #000;
                border-radius: 30px;
                font-size: 14px;
              "
              size="small"
              @click="delList(i)"
            >
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </z-panel>
    <z-panel :config="{ title: '票种信息', index: 5 }">
      <!-- 按钮 -->
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-button class="addticketbtn" type="primary">+免费票</el-button>
          <el-button class="addticketbtn" type="primary">+付费票</el-button>
          <el-button class="addticketbtn" type="primary">+捐赠票</el-button>
        </el-form-item>
        <el-from-item>
          <div
            style="
              width: 100%;
              height: 267px;
              border: 1px solid #979797;
              margin-bottom: 44px;
            "
          >
            <div
              style="
                height: 64px;
                line-height: 64px;
                background-color: #d8d8d8;
                padding-left: 38px;
                font-size: 20px;
                color: #414042;
              "
            >
              付费票支付设置
            </div>
            <div style="margin-top: 30px">
              <div class="ticket_content">
                <span style="margin-right: 24px">支付方式</span>
                <el-checkbox label="银行卡支付"></el-checkbox>
                <el-checkbox label="支付宝支付"></el-checkbox>
                <el-checkbox label="微信支付"></el-checkbox>
              </div>
              <div class="ticket_content">
                <span style="margin-right: 24px">转账手续费承担方</span>
                <el-radio label="1">举办方承担</el-radio>
                <el-radio label="2">用户承担</el-radio>
              </div>
              <div class="ticket_content">
                <span style="margin-right: 24px">退款设置</span>
                <el-checkbox label="禁止退款"></el-checkbox>
              </div>
            </div>
          </div>
        </el-from-item>
        <el-form ref="form" :model="form">
          <el-table :data="tableData">
            <el-table-column prop="" label="票种名称"></el-table-column>
            <el-table-column prop="" label="价格($)"></el-table-column>
            <el-table-column prop="" label="张数"></el-table-column>
            <el-table-column prop="" label="限购数量"></el-table-column>
            <el-table-column prop="" label="状态"></el-table-column>
            <el-table-column prop="" label="操作"></el-table-column>
          </el-table>
          <el-table :data="tableData">
            <el-table-column prop="" label="场次"></el-table-column>
            <el-table-column prop="" label="票种"></el-table-column>
          </el-table>
        </el-form>
        <el-from-item>
          <div
            style="
              display: flex;
              justify-content: center;
              margin-top: 56px;
              padding-bottom: 96px;
            "
          >
            <el-button class="draftBtn" style="" type="primary"
              >存为草稿</el-button
            >
            <el-button class="releaseBtn" style="" type="primary"
              >发布活动</el-button
            >
          </div>
        </el-from-item>
      </el-form>
    </z-panel>
    <!-- 自定义表单弹层 -->
    <AddForm :openAddForm="openAddForm" @close-addform="openAddForm = $event" />
    <!-- 自定义用户协议弹层 -->
    <Agreement :showDialog="showDialog" @close-dialog="showDialog = $event" />
    <!-- 自定义上传弹层 -->
    <Upload :openUpload="openUpload" @close-upload="openUpload = $event" />
  </div>
</template>

<script>
// 富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 导入自定义表单弹层
import AddForm from './components/addform.vue'
// 导入自定义用户协议弹层
import Agreement from './components/agreement.vue'
// 导入自定义上传弹层
import Upload from './components/upload.vue'

export default {
  components: {
    quillEditor,
    AddForm,
    Agreement,
    Upload
  },
  data () {
    return {
      openAddForm: false,
      showDialog: false,
      openUpload: false,
      // 富文本编辑器默认内容
      content: ' ',
      //富文本编辑器配置
      editorOption: {
        placeholder: "",
        modules: {
          ImageExtend: {//图片上传模块
            loading: false,
            name: 'file',
            action: '/api/xcmanager/v1/pub/uploadPicture', //图片上传接口地址
            response: (res) => {
              return res.result
            }
          },
          formula: true,
          imageResize: {//图片可伸缩模块
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
          toolbar: {//工具栏配置
            container: [
              ["formula"],
              ["bold", "italic", "underline"], // toggled buttons
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }], // superscript/subscript
              [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }], // dropdown with defaults from theme
              [{ font: [] }],
              [{ align: [] }],
              ["image"],
              ["strike"],//当前位置添加横线
              ['clean'] //选区前后添加$$
            ],
            handlers: {//事件处理函数
              image: function (value) {
                QuillWatch.emit(this.quill.id)
              },
              strike: function (value) {//当前位置添加横线
                if (value) {
                  var length = this.quill.selection.savedRange.index
                  // this.quill.insertText(length,'_____')
                  // this.quill.insertText(length,'666')
                  this.quill.insertText(length, "$$\\underline{\\qquad}$$")
                  this.quill.setSelection(length + 24)
                }
              },
              clean: function (value) {//选取所在前后位子添加$$ --katex解析latex数学公式需求
                var weizhi = this.quill.getSelection().index //选区位置
                var length = this.quill.getSelection().length //选区字符长度
                var houLength = (weizhi + length + 2)
                this.quill.insertText(weizhi, '$$')
                this.quill.insertText(houLength, '$$')
              },
              'formula': function (value) {
                if (value) {
                  var length = this.quill.selection.savedRange.index
                  this.quill.insertText(length, '$$$$')
                  this.quill.setSelection(length + 2)
                }
              }
            },
          },
        },
      },
      form: {
        name: "",
        Introduction: "",
        time: "",
        city: "",
        Theme: "",
        label: "",
        address: "",
        highlights: "",
        organization: "",
        limit: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        // 上传海报
        imageUrl: '',
        // 日期选择器
        value1: '',
      },
      tableData: [{
        courseName: '',
        courseTime: '',
        operation: ''
      },],
      information: [{
        name: '',
        time: '',
      }],
    }
  },
  created () {

  },
  methods: {
    // 删除场次信息
    delList (index) {
      this.information.splice(index, 1)
    },
    // 新增场次信息
    addList () {
      const newList = {
        name: '',
        time: ''
      }
      this.index++
      this.information.push(newList)
    },
    onSubmit () {
      console.log("submit!")
    },
    // 上传海报
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传海报只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传海报大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 富文本，失去焦点事件
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    // 富文本，获得焦点事件
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    // 富文本，准备富文本编辑器
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    },
    // 富文本，内容改变事件
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  }
}

</script>
<style scoped lang='scss'>
div /deep/ .el-table tbody tr {
  pointer-events: none;
  background-color: #f0f4fa;
}
::v-deep .el-table th {
  background-color: #d8d8d8;
}
/deep/.cell {
  font-size: 24px;
  font-weight: 400;
  color: #414042;
}
.course_name {
  width: 212px;
  height: 49px;
  border-radius: 30px;
  border: 1px solid #979797;
  font-size: 24px;
  padding: 0 13px 0 13px;
}
/deep/.el-input__prefix {
  left: 301px;
  top: 3px;
}
/deep/ .el-checkbox__label {
  font-size: 21px;
  text-align: center;
  color: #2e4562;
}
/deep/ .el-input__inner {
  background-color: #d8d8d8;
  border: 0;
  border-radius: 25px;
  height: 48px;
  font-size: 21px;
  &::placeholder {
    color: #2e4562;
  }
}
/deep/ .el-input__icon:before {
  font-size: 18px;
  color: #2e4562;
}
.releaseBtn {
  width: 200px;
  height: 67px;
  border-radius: 25px;
  background-color: #ed8e1e;
  color: #fff;
  border: 0;
  font-size: 18px;
  margin-left: 88px;
}
.draftBtn {
  width: 200px;
  height: 67px;
  border-radius: 25px;
  background-color: #f0f4fa;
  color: #2e4562;
  border: 0;
  font-size: 18px;
  margin-right: 24px;
}
.ticket_content {
  margin-bottom: 36px;
  padding-left: 24px;
  font-size: 12px;
  color: #2e4562;
}
.item {
  width: 110px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  background: #d8d8d8;
  border-radius: 25px;
  margin: 0 14px 14px 0;
  font-size: 21px;
  color: #414024;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.addticketbtn {
  width: 250px;
  height: 72px;
  background-color: #f8b844;
  border: 0;
  border-radius: 30px;
  color: #414042;
  font-size: 21px;
  font-weight: bold;
}
.diy_agreement_margin {
  background-color: #d8d8d8;
  border: 0;
  color: #414042;
  margin: 31px 0 15px 0;
  font-size: 24px;
}
.addinput_itself {
  height: 55px;
  border: solid 1px #d8d8d8;
  padding: 27px;
  font-size: 24px;
  color: #414042;
}
// 富文本
.quill-editor /deep/ .ql-snow .ql-tooltip[data-mode="formula"]::before {
  content: "请输入公式:";
}
.quill-editor /deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}
.selectQuil /deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 100px;
}
::v-deep .ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 500px !important;
}
// 上传海报
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  background-color: #d8d8d8;
  width: 510px;
  height: 320px;
  line-height: 320px;
  text-align: center;
}
.avatar {
  width: 510px;
  height: 320px;
  display: block;
}
</style>